import {
  deviceIconUrl,
  ErrorImageUrl,
  iconUrl,
  imagesUrl,
  paramIconUrl,
  productUrl,
  settingUtilIcoUrl
} from '@/utils/baseUrl'
import {paramStatus2Color} from '@/utils/common'
import {Image, View} from '@tarojs/components'
import {CSSProperties, useState} from 'react'

export const CImg: React.FC<{
  imgName: string
  width?: number | string
  height?: number
  style?: CSSProperties
}> = ({imgName, width, height, style}): JSX.Element => {
  const [imgError, setImgError] = useState(false)

  return (
    <Image
      onError={err => {
        if (err.detail.errMsg.indexOf('404 (Not Found)') !== -1) {
          setImgError(true)
        }
      }}
      lazy-load={true}
      src={!imgError ? imagesUrl + `${imgName}.png` : ErrorImageUrl}
      style={Object.assign(
        {
          display: 'inline-block',
          width: `${typeof width === 'number' ? (width || 48) + 'rpx' : width}`,
          height: `${height || 48}rpx`
        },
        style
      )}
    ></Image>
  )
}

export const ProductImg: React.FC<{
  imgName: string
  width?: number | string
  height?: number
  style?: CSSProperties
}> = ({imgName, width, height, style}): JSX.Element => {
  const [imgError, setImgError] = useState(false)

  return (
    <Image
      onError={err => {
        if (err.detail.errMsg.indexOf('404 (Not Found)') !== -1) {
          setImgError(true)
        }
      }}
      lazy-load={true}
      src={!imgError ? productUrl(imgName) : ErrorImageUrl}
      style={Object.assign(
        {
          display: 'inline-block',
          width: `${typeof width === 'number' ? (width || 48) + 'rpx' : width}`,
          height: `${height || 48}rpx`
        },
        style
      )}
    ></Image>
  )
}

export const IconImg: React.FC<{
  imgName: string
  width?: number
  height?: number
  style?: CSSProperties
}> = ({imgName, width, height, style}): JSX.Element => {
  const [imgError, setImgError] = useState(false)

  return (
    <Image
      onError={err => {
        if (err.detail.errMsg.indexOf('404 (Not Found)') !== -1) {
          setImgError(true)
        }
      }}
      lazy-load={true}
      src={!imgError ? iconUrl(imgName + '.png') : ErrorImageUrl}
      style={Object.assign(
        {
          display: 'inline-block',
          width: `${width || 48}rpx`,
          height: `${height || 48}rpx`
        },
        style
      )}
    ></Image>
  )
}

export const DeviceStatusIcon: React.FC<{
  status: string
  style?: CSSProperties
}> = ({status, style}): JSX.Element => {
  const [imgError, setImgError] = useState(false)

  const status2ImgName = (status: string): string => {
    switch (status) {
      case '在线':
        return deviceIconUrl('onLine.png')
      case '离线':
        return deviceIconUrl('offLine.png')
      default:
        return ''
    }
  }
  return (
    <Image
      onError={err => {
        if (err.detail.errMsg.indexOf('404 (Not Found)') !== -1) {
          setImgError(true)
        }
      }}
      lazy-load={true}
      src={!imgError ? status2ImgName(status) : ErrorImageUrl}
      style={Object.assign(
        {
          width: `32rpx`,
          height: `32rpx`
        },
        style
      )}
    ></Image>
  )
}

export const ParamIcon: React.FC<{
  iconName: string
  opacity?: number
  width?: number
  height?: number
  style?: CSSProperties
}> = ({iconName, width, height, opacity, style}): JSX.Element => {
  const [imgError, setImgError] = useState(false)
  return (
    <Image
      onError={err => {
        if (err.detail.errMsg.indexOf('404 (Not Found)') !== -1) {
          setImgError(true)
        }
      }}
      lazy-load={true}
      src={!imgError ? paramIconUrl(iconName + '.png') : ErrorImageUrl}
      style={Object.assign(
        {
          opacity: opacity === undefined ? 1 : opacity,
          width: `${width || 48}rpx`,
          height: `${height || 48}rpx`
        },
        style
      )}
    ></Image>
  )
}

export const ParamStatusIcon: React.FC<{
  status: string
  width?: number
  height?: number
  style?: CSSProperties
}> = ({status, width, height, style}): JSX.Element => {
  return (
    <View
      className="rounded-full"
      style={Object.assign(
        {
          width: `${width || 16}rpx`,
          height: `${height || 16}rpx`,
          backgroundColor: paramStatus2Color(status)
        },
        style
      )}
    ></View>
  )
}

export const SettingUtilIcon: React.FC<{
  code?: string
  style?: CSSProperties
}> = ({code, style}): JSX.Element => {
  const [imgError, setImgError] = useState(false)

  const funCode2IconName = (code?: string): string => {
    switch (code) {
      case '0002':
        return settingUtilIcoUrl('shareDev.png')
      case '0148':
        return settingUtilIcoUrl('report.png')
      case '0005':
        return settingUtilIcoUrl('devLog.png')
      case '0009':
        return settingUtilIcoUrl('collectionTimes.png')
      case '0064':
        return settingUtilIcoUrl('devDataSwitch.png')
      case '0149':
        return settingUtilIcoUrl('productFile.png')
      case '0075':
      default:
        return settingUtilIcoUrl('standRange.png')
    }
  }
  return (
    <Image
      onError={err => {
        if (err.detail.errMsg.indexOf('404 (Not Found)') !== -1) {
          setImgError(true)
        }
      }}
      lazy-load={true}
      src={!imgError ? funCode2IconName(code) : ErrorImageUrl}
      style={Object.assign(
        {
          width: `72rpx`,
          height: `72rpx`
        },
        style
      )}
    ></Image>
  )
}
